<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 1.app.message修改数据，vue内部是如何监听message数据
        * object.defineProperty -> 监听对象属性的改变
         2. 当数据发生改变，vue是如何要通知哪些人，界面发生刷新
        * 发布订阅者模式
        -->


    <div id="app">
        <h2>{{message}}</h2>  <!--张三-->
        <h2>{{message}}</h2>  <!--李四-->
        <h2>{{message}}</h2>  <!--王五-->
        {{name}} 

    </div>
    <script>
        const obj = {
            message: '哈哈哈',
            name: 'kan'
        }

        Object.keys(obj).forEach( key => {
            let value = obj[key]

            Object.defineProperty(obj,key,{  //监听值的改变
                set(newvalue){
                    console.log("监听" + key + '改变');
                    value = newvalue;
                    // 告诉谁了？ 谁用告诉谁？ 谁在用了？
                    // 根据解析html代码，获取到哪些人有用属性
                    // 张三 李四 王五

                    dep.notify()
                },
                get(){
                    console.log('获取'+ key +'对应的值'); 
                    //张三： get -> update
                    //李四： get -> update
                    const w1 = new Watcher('张三');

                    return value
                }
            })
        })

        // obj.name = 'kobe'

        // 发布者订阅者

        //发布者 dependency
        class Dep {
            constructor () {
                this.sub = []  //记录订阅者  subcribe
            } 

            addSub (watcher) {
                this.sub.push(watcher)
            }

            notify(){
                this.subs.forEach(item=>{
                    item.updated()
                })
            }
        }


        //订阅者
        class Watcher {
            constructor( name){
                this.name = name;
            }

            updated() {
                console.log(this.name + "发生update")
            }
        }

        const dep = new Dep()

        const w1 = new Watcher('张三')
        dep.addSub(w1)

        dep.notify()
    </script>


    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '哈哈哈',
                name: 'kan'
            }
        })
    </script>
</body>

</html>